<!-- 标签管理 -->
<template>
  <!-- :tab-list="tabList"
  :active-tab-key="tabKey"
  @tabChange="key => onTabChange(key)" -->
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="标签名称:">
          <a-input v-model="queryParam.name" placeholder="搜索标签名称" allowClear />
        </a-form-item>
        <a-form-item label="标签分组:">
          <a-select v-model="queryParam.belongId" allowClear placeholder="请选择" class="min-width-15">
            <a-select-option :value="0">默认分组</a-select-option>
            <a-select-option v-for="item in groupData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否对外展示:">
          <a-select v-model="queryParam.isShow" allowClear placeholder="请选择">
            <a-select-option :value="0">是</a-select-option>
            <a-select-option :value="1">否</a-select-option>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <a-button v-has="'member:grouping:add'" type="primary" @click="openTagGroup">标签分组</a-button>
        <a-button v-has="'member:grouping:add'" type="primary" @click="openAddTag">添加标签</a-button>
      </div>
      <CustomTable :name="$route.name" :columns="columns" :newColumns="newColumns" />
    </div>
    <s-table ref="table" size="default" rowKey="id" :columns="newColumns" :data="loadData" :rowSelection="null">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (queryParam.current - 1) * queryParam.size + parseInt(index) + 1 }}
      </span>
      <!-- 是否对外显示 -->
      <span slot="belongId" slot-scope="text, record, index">
        {{ findGroupData(record.belongId) }}
      </span>
      <!-- 是否对外显示 -->
      <span slot="isShow" slot-scope="text, record, index">
        {{ record.isShow === 0 ? '是' : '否' }}
      </span>
      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button
            v-for="item in _btnList(record)"
            :key="item.text"
            type="primary"
            ghost
            size="small"
            class="_mr-5"
            @click="item.fn"
          >
            {{ item.text }}
          </a-button>
        </template>
      </span>
    </s-table>
    <TagGroupModal ref="TagGroupModal" :groupData="groupData" @refreshGroup="refreshGroupList" />
    <TagModal ref="TagModal" :groupData="groupData" @refreshTag="handleReset" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import CustomTable from '@/components/Cuscolumn'
import { checkPermission } from '@/utils/authority'
import TagGroupModal from './components/tagGroupModal'
import TagModal from './components/tagModal'
import { getTagList, getTagGroupList, delTag } from '@/api/member/grouping'

export default {
  components: {
    STable,
    CustomTable,
    TagGroupModal,
    TagModal
  },
  data() {
    return {
      // tabList: [
      //   {
      //     key: '1',
      //     tab: '单位标签'
      //   },
      //   {
      //     key: '0',
      //     tab: '用户标签'
      //   }
      // ],
      tabKey: '0', // 0 用户标签 1 单位标签
      queryParam: {
        current: 1,
        size: 10,
        name: '',
        belongId: undefined,
        isShow: undefined // 0 展示 1 不展示
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '标签名称',
          dataIndex: 'name',
          width: '300px',
          ellipsis: true
        },
        {
          title: '标签人数',
          dataIndex: 'useNum',
          width: '100px',
        },
        {
          title: '标签分组',
          dataIndex: 'belongId',
          width: '150px',
          scopedSlots: { customRender: 'belongId' },
          ellipsis: true
        },
        {
          title: '是否对外展示',
          dataIndex: 'isShow',
          width: '120px',
          scopedSlots: { customRender: 'isShow' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '180px'
        },
        {
          title: '操作',
          width: '220px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.queryParam.current = parameter.pageNum
        this.queryParam.size = parameter.pageSize
        return getTagList({ type: this.tabKey, ...this.queryParam })
      },
      groupData: []
    }
  },
  computed: {
    newColumns() {
      const currentColumns = this.$store.state.user.customTable;
      if (currentColumns && currentColumns[this.$route.name]) {
        return this.$options.data().columns.filter(v => {
          const _items = currentColumns[this.$route.name].find((item) => item === v.title || item.title === v.title);
          if(_items) return Object.assign(v,_items)
        }).sort((a,b)=>{return a.tableSort - b.tableSort})
      } else {
        return this.columns
      }
    }
  },
  mounted() {
    this.refreshGroupList()
  },
  methods: {
    // 重置
    handleReset() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam)
      this.$refs.table.refresh(true)
    },
    // onTabChange(key) {
    //   this.tabKey = key;
    //   this.refreshGroupList();
    //   this.$refs.table.refresh(true);
    // },
    // 刷新分组列表
    refreshGroupList() {
      getTagGroupList({ current: 1, size: 999, type: this.tabKey }).then(res => {
        this.groupData = res.data.records
      })
    },
    // 打开分组管理
    openTagGroup() {
      this.$refs.TagGroupModal.show(this.tabKey)
    },
    // 打开添加标签
    openAddTag() {
      this.$refs.TagModal.show(this.tabKey)
    },
    openEditTag(row) {
      this.$refs.TagModal.show(this.tabKey, row)
    },
    handleDel(row) {
      const _that = this
      _that.$confirm({
        title: `确认删除标签?`,
        content: `删除后无法恢复${row.useNum ? ',以及关联的成员将去除此标签' : ''},确定删除吗?`,
        centered: true,
        onOk() {
          delTag({ id: row.id }).then(() => {
            _that.$message.success('删除成功')
            _that.handleReset()
          })
        },
        onCancel() {}
      })
    },
    findGroupData(id) {
      if (!id) return '默认分组'
      const currentObj = this.groupData.find(v => v.id === id)
      return currentObj ? currentObj.name : '默认分组'
    },
    _btnList(record) {
      let oldList = [
        {
          show: checkPermission('member:grouping:edit'),
          text: '编辑',
          fn: () => this.openEditTag(record)
        },
        {
          show: checkPermission('member:grouping:remove'),
          text: '删除',
          fn: () => this.handleDel(record)
        }
      ]
      return oldList.filter(v => v.show)
    }
  }
}
</script>
<style scoped lang="less"></style>
